import { VantComponent } from "../common/component";
import { useChildren } from "../common/relation";
import { getRect } from "../common/utils";
VantComponent({
	relation: useChildren("tabbar-item", function () {
		this.updateChildren();
	}),
	props: {
		active: {
			type: null,
			observer: "updateChildren"
		},
		activeColor: {
			type: String,
			observer: "updateChildren"
		},
		inactiveColor: {
			type: String,
			observer: "updateChildren"
		},
		fixed: {
			type: Boolean,
			value: true,
			observer: "setHeight"
		},
		placeholder: {
			type: Boolean,
			observer: "setHeight"
		},
		border: {
			type: Boolean,
			value: true
		},
		zIndex: {
			type: Number,
			value: 1
		},
		safeAreaInsetBottom: {
			type: Boolean,
			value: true
		}
	},
	data: {
		height: 50
	},
	methods: {
		updateChildren() {
			const { children } = this;
			if (!Array.isArray(children) || !children.length) {
				return;
			}
			children.forEach(child => child.updateFromParent());
		},
		setHeight() {
			if (!this.data.fixed || !this.data.placeholder) {
				return;
			}
			wx.nextTick(() => {
				getRect(this, ".van-tabbar").then(res => {
					this.setData({ height: res.height });
				});
			});
		}
	}
});
